General and specific teaching objectives 
Information and Communication Technology 
For the second year of middle school 
((general aims)) 

e Learning about some of the processes and concepts of creating a web page. 

e acknowledge some basic concepts and processes of information and communication 
technology services and applications. 

e Understand some aspects of intellectual security related to the use of the information and 
communication technology. 

e Producing a project (site design) using technological processes, programs, and tools. 

e Use technological production tools (Html - Multimedia "audio, video and audio") to support his 
learning. 

e Employing technological communication tools in exchanging the contents and insights with 
others. 

e use the electronic sources in dealing with information. 

e Use technological tools to process and evaluate data and prepare results reports. 


((Special goals)) l 


e Learns about some basic scientific concepts and terms of information technology (websites - web page) 
e Practices basic operations to deal with ICT applications. 


e Explains the stages of designing and creating a website. 

e Recognizes sound creation and processing programs. 

e Preparing (data, software, and hardware components) for sound creation. 

e Audacity is a program used in creating and processing audio files. 

e Processing the audio clip (add effect - delete - ...) 

e Recognizes the types of audio file extensions. 

e Recognizes some processing programs for video files. 

e Imports files (images/audios) to Openshot video creation and processing program 
e Creates video scenes within video file processing program. 

e Adjusting video scenes. 

e Saving the project video file. 

e Adding (effects/transitions/text) to video viewers. 

e Exports the video to a file with a suitable extension. 

e Familiarize yourself with some of the tools of producing information pages and Internet 
services. 

e Recognizes the basic rules for creating a web page using HTML commands. 

e Recognizes the syntax for creating a web page with HTML commands. 

e Adding a content to the web page (text - image - video - hyperlinks...) 

e Coordinating web page content. 

e Inserting a hyperlink between the pages of the site. 

e Determining the number of website pages from the detailed website layout. 
e Creating different website pages in HTML format. 

e Inserting a hyperlink between the pages of the site. 


Date Lesson (1) strategy 


Class Concepts and basics of brainstorming 

Period websites dialogue and discussion. 
| | By the end of the lesson students will be able to: | "Preface" 
| _ e Recognize the concept (websites / web page / home page) _-What are the latest websites | 
| | eDeduce the components of a website. _you visited and what are their | 


| | eExplain the elements of a web page (text - image - video - | components? 
hyperlink) 
Accompanying activities 


Take the students to the computer room and ask them the introductory question and ask 
each group to make a list of contents of sites and present them to the other groups, with 


discussion to reach the main points of the lesson and present them. 


Website: One or more web pages linked to each other under a specified name. It has an 


internet address called the website address, and it can be visited through a computer or 
mobile phone. 

Web page: A document containing electronic content, which is published on the Internet 
and displayed through an Internet browser program. 

Homepage: It is the opening page on the website through which other pages can be 
visited. 

Web page elements: (text - image - video - hyperlink). 


Static Web Pages: - The content of these pages was previously prepared by the developer 
of the page which does not change, and the visitor can’t modify it. Designed with HTML 
language. We'll see how to design these pages later using HTML language. 


Interactive webpage: An information page that displays content that visitors can interact 
with and process. HTML commands are used to design this type of page as well as other 
languages such as JavaScript, PHP, and others. 


Note: - To see the information pages, we use a browser program such as Internet 
Explorer, Google Chrome. 


LS 


Evaluation ) 


Date Lesson (2) strategy 

Class The stages of designing brainstorming 

Period and creating a website dialogue and discussion. 
| | By the end of the lesson students will be able to: | "Preface" 
| edifferentiate between the stages of designing and creating a website. | -What are the stages of | 
| Search for texts needed for different web pages | designing and creating a 
| Draw a simple outline on a paper of the pages of My School. | website? | 


Accompanying activities 


Take the students to the computer lab and ask them the introductory question and ask 
each group to make a list of contents of a site and present them to the other groups, with 


discussion to reach the main points of the lesson and present them. 


The first stage: Planning to build a website: 
**Putting a simple outline on a paper for the home page and web pages of the site. 


**Determining the data and information contained in the web pages. 

The second stage: designing the main and sub-page: 

**Designing the home page and web pages. 

**Setting the background color for web pages. 

**Determining where to place text, images, and video clips on web pages. 

**Defining hyperlinks within the web page. 

The third stage: preparation and processing: 

** Preparation and processing of text files, images, audios, videos and saving them within 
a folder. 

Fourth stage: Implementation stage: 

Using one of the programming languages and HTML commands: - 

** Converting design to web pages. 

**Putting data (texts - images - audio - video) in web pages. 

**Creating hyperlinks to website pages. 

The fifth stage: publishing the site on the Internet. 

** Reserve an address for the site, allocate a storage space for it on one of the servers to 


publish the site. 


Evaluation 


Complete: - In the stage of implementing the site design, We do ...........cssssssscessseesees 


Date Lesson (3) strategy 
Class Create and process audio Practical Application - 
Period files Cooperative Education. 
| | By the end of the lesson students will be able to: | "Preface" 
| | *Recognize the sound creation and processing program. | How do you create an | 
|| ¢Prepares and process the data and components to create an audio file. | audio file? 


| __¢ Modify the audio clip by adding an effect. 


Accompanying activities 


Take the students to the computer lab and put them into groups and ask them the 


introductory question and show them some audio creation softwares, including Audacity, 


show them how to create an audio file, and make them prepare an audio file according to 


the activities book and the practical application of the lesson as previously described. 


Steps to create an audio file: 

First, the preparation: 

-Collect data that will be recorded by voice. 

-Ensure that one of the audio creation and processing programs is installed on the 
devices. 

-Ensure that the microphone and speakers are connected to the computer. 
Second, the implementation of creating an audio file: 

-Download a program for creating and processing audio files. 

-Start recording audio by pressing the Record button. 

-Use the microphone to enter audio data. 

-To finish entering the voice data, press the Stop button. 

- Press the Play button to play the sound and listen to it through the speaker,. 
Third, modifying the sound by adding an effect: 

-Selecte the audio clip to add the effect by clicking and dragging on the desired portion of 
the audio using the reading pointer on the timeline. 


-From the effect menu, choose one of the desired effects. 


Evaluation | 


Describe the steps of preparing to create an audio file? 


Date Lesson (4) strategy 

Class Following: creation and Practical Application - 

Period processing audio files Cooperative Education. 
| | By the end of the lesson students will be able to: | "Preface" 
|| *Process an audio clip (cut, paste/delete) How can you modify audio | 
| *Export the audio to a file with an appropriate extension. | files? 


l e Recognize the types of audio file extensions. 


Accompanying activities 


Take the students to the computer lab and ask them the introductory question and show 
them some activities for using Audacity to edit audio tracks, and the way to export audio 


files with different extensions, and make them do the lesson activities in a hands-on way 


Cut and paste an audio clip: 

-Select the audio clip to be transferred, from the "Edit" menu, choose "Cut." 
-Move the timeline cursor where you want to paste the audio clip, from the Edit menu 
choose Paste 

-Play the audio from the play button and listen to it. 

Delete the audio clip: 

-Select the audio clip you want to delete. 

-Press the "Delete" key on the keyboard. 

Export an audio file: 

-From the File menu, choose Export Audio. 

-Select the appropriate extension for the audio file. 


Types of audio file extensions: 


wav High Quality Large Not suitable for web 
publishing 

Mp3 Lower quality small Suitable for publishing 
on the web 


Evaluation ) 


- Compare wav and mp3 file extension in terms of storage capacity of each? 


Date Lesson (5) strategy 
Class Creating and Editing Practical Application - 
Period Video Files Cooperative Education. 
| | By the end of the lesson students will be able to: | "Preface" 
e Recognize some video processing software. How do you create a video file? 


| | e import files (images/audio) for editing and processing video files. 
: e Create video scenes within the video file processing program. 


Accompanying activities 


Take the students to the computer lab and put them into groups and ask them the 
introductory question and show them some video creation softwares including openshot, 
show them the opening screen and the way to import files in the program to create video 


scenes within the program and ask them to carry out the lesson activities. 


e) 


creating and processing video files Programs are programs that enable the user to create 


and modify video files through many tools, means and effects, including open-source 
programs such as Openshot and closed source programs such as movie maker. 


Openshot video creation and processing program interface: 
1 - Main Toolbar. r COE = 


2 - Project files. 

3 - Function Tab. 

4 - video Preview. 

5 - Edit Toolbar. 

6 - Zoom out and Zoom Slider. 
7 - Play head / Ruler. 

8 - Timeline. 

Creating Video Clips: 
-Import image and audio files into the program. 

- Arrange video scenes (photos / audio) on the timeline of the program 


Evaluation ) 


- What are the steps for creating a video scene? 


- Preview the video. 


Date Lesson (6) strategy 
Class Following: Creating and Editing Practical Application - 
Period Video Files (1) Cooperative Education. 
| | By the end of the lesson students will be able to: | "Preface" 
e Modify video scenes. | How do you save a video file? 


e Save the project video file. 
e Add effects to video scenes. 


Accompanying activities 


Take the students to the computer lab and put them in groups and ask them the 
introductory question and show them how to modify scenes through program to save the 


file, and add effects and ask them to apply the same project they created in the previous 
class. 


Save the video project: 
**Save all files (images, audio...) used in video viewers within a specific folder. 


**Erom the main toolbar, choose File, and select ‘Save Project As’. 

Edit video scenes: 

1 - Control the period of time to display a video: 

- after selecting the time period of scene on the timeline. 

* * click and drag on the head of the reading cursor and move it until it reaches the 
desired place on the time bar. 

** By clicking on the scene path with the right mouse button, a shortcut menu appears. 
When selecting Slice Clip, the following appears: 

** Keep the two slides: (left and right) 

** Keep the left slide: Only the left slide is preserved. 

** Keep the right slide: Only the right slide is preserved. 

2 - Add an effect to the video scene: 

**Click on the Effects tab and choose an effect by clicking and dragging on it and adding it 
to the scene. 

**The effect icon appears on the video scene. The name of the effect can be read by 
pointing to its icon with the mouse. 

**To delete an effect, right-click on the effect and select Remove Effect 


Evaluation 


-What are the steps of saving the project? 


Date Lesson (7) strategy 


Class Following: Creating and Editing Practical Application - 
Period Video Files (2) Cooperative Education. 
| | By the end of the lesson students will be able to: | "Preface" 
e Add (transitions / text) to the video scenes. ` How do you add transitions to a _ 
e Export the video to a file with an appropriate extension. | video file? 


e differentiate between the extensions of video files. 


Accompanying activities 


Take the students into the computer lab, put them into groups, ask the introductory 
question, show them how to add transitions and text to video scenes, and the way to 
export them with an appropriate extension from the exercises in the book, and make 


them do it. Apply what they have learned and choose the best projects. 


Add transitions to a video scene: 

** Click on the Transitions tab 

** Click and drag one of the transitions and add it to the desired scene. 

**Put the transition at the beginning or end of the scene. 

** Control the period of time to view the transition by clicking and dragging it to decrease 
or increase the width. 

Add text to the video: 

** From the title menu, select the title. 

** Fill in the information in the dialog. 

** Save the text to a save file 

** Name the text file in English. 

** The text file appears in the project files. 

** Add the text file to the video viewer by clicking and dragging it and adding it to one of 
your tracks. 

Export the video file with a suitable extension: 

Click ‘ Export Video’ button, and from the dialog box, select the following: 

** The video file name from “File name" where the file is saved "Folder Path" 

** The Video file extension type from "Target", select the quality level of the file 
"Quality" 

** Export the video by clicking on the "Export Video" button. 


Evaluation | 


- What are the steps for adding a text to a video scene? 


Video file types: (mp4, avi.......) 


Date Lesson (8) strategy 


Class Creating web pages with HTML Practical Application - 
Period (Hyper Text Markup Language) Cooperative Education. 
| | By the end of the lesson students will be able to: | "Preface" 
_ e Learn about some tools needed to produce an information page and | How to create website | 
Internet service. | pages using HTML? 


| | e Learn the basic rules for creating a web page using HTML commands. 
l e Recognize the syntax for creating a web page using HTML commands. 


Accompanying activities 


Take the students to the computer lab and divide them into groups and ask them the 
introductory question and show them a set of simple web pages and present the source 


code of the page and discuss with them about the structure of it by presenting the main 


points of the lesson through practical application. 


C nw) 
HTML: 


** It is a markup language used to create static website pages that are displayed using a 
web browser. 


Basic rules for creating a web page with HTML commands: 
- Create a text file in HTML script. 


- write HTML commands between the "<>" tags. 

- Most of them begin by "<>", and end with"</>" . 

- Save the html file with extension htm or html 

- Open the saved file through a web browser. 

- HTML commands do not need to be written in uppercase or lowercase. 


Structure of creating a web page using HTML: 
Writing the <html> command in the beginning of the code indicates that the document is 


written in HTML and divides the code into two parts: - 


Head: The area for typing information to the browser about the page, such as the page title. 


Body: The area for writing the content that will appear on the page. 
Add a title to a web page with the <title>......</title> command: - 


Executing Activity (2) Page 81. 


Evaluation ) 


Complete: - Text files are saved in html with the extension .............ssscccssssccescsseescsseeees 


Date strategy 


Lesson (9) 
Add content to a web page Brainstorming 
Dialogue and Discussion. 


Period 
| _ By the end of the lesson the student will be able to: 

| e Add text to the web page. 

| | e Change the page orientation using the dir property. 


Accompanying activities 


Take the students to the computer room and divide them into groups and ask them the 


| "Preface" T 
How do you add and center | 
| textonawebpage? 


introductory question and ask them to write the basic commands for the page in a new 


file and show them how to add and center text and how to add a new line and change the 


page orientation and ask them to apply what they learned through the book exercises. 


View Lesson 


Steps to add text to a web page: 

In the text file, write "My school is nice and clean" inside the </body> command.... 
<body> 

Save the text file with the name “school.htm” 


Open the file " school.htm " through the browser to see the result of executing the 
commands. 

Change the orientation of a web page using the Dir property: 

Command: <body dir="rtl"> 

Rtl property value : The orientation of the web page is right to left. 

Ltr property value: The orientation of the web page is from left to right. 

Typing starting from a new line with the command br: You type the command <br> so 
that the text appears in two lines. 

Text alignment (centered) with Center command: The <center> ... </center> command is 
written before the text to be centered and after saving appears in the preview in the 
middle of the web page 

Example of the command <center> school site </center> 


Complete: The command..............+20+ is used to write from the beginning of a new line. 


Date strate 
Lesson (10) : ae 
Class Brainstorming 
- Web page format , . . 

|| Period Dialogue and Discussion. 
|| By the end of the lesson the student will be able to: 
| | e Add a blank space between words with the nbsp command. "Preface" 
| © Set a background color for the web page with bgcolor property. | How do you add a blank 


| | © Set an image as a background for the web page with the 
__ Background feature. 


Accompanying activities 


Take the students to the computer room and divide them into groups and ask them the 


space between words? 


introductory question and ask them to write the basic commands of the page in a new file 
and show them how to add space between words and how to change the background of 
the page with a color or an image and ask them to apply what they learned through the 

book’s exercises. 


View Lesson 


Add spaces between words with the command nbsp; : 


The nbsp; command is used. To leave spaces between words and the number of its 
repetition, spaces are left with the same number, for example, if it is repeated 4 times, 
4 blank spaces are placed. 

Set a background color for the web page with the bgcolor property: 

The command used bgcolor 

The syntax of writing the command: <body bgcolor="green">. Here, the green color is 
placed as the background. 

Set an image as the background of a web page with the Background property: 

The command used is body background 

The syntax of the command <body background="imagel1.jpg"> where image1 is the 
image used as the background. 


Complete: - The Property .............csssssseee is used to add an image as the background of a 
web page 


Date Lesson (11) strategy 

Class Web page font Brainstorming 

Period formatting Dialogue and Discussion. 
| | By the end of the lesson the student will be able to: | "Preface" 
| © Format the font using the Font command. _ How can you format the 
| : e Change the font style with commands (i /b/u) | font on a web page? 


| | © Save changes and displays them through the browser. 


Accompanying activities 
Take the students to the computer room and divide them into groups and ask them the 
introductory question and ask them to write the basic commands for the page and write a 
specific text in a new file and show them how to change the type, size and shape of the 
font with the addition of formatting to it and ask them to apply what they learned 


through the book’s exercises. 


View Lesson 


To control the type and size of the font, the <font> command is used, which has a set of 


Web page font format: 


properties, including: 

- Specify the type of font: face property 

- Specify the color of the font: the color . property 

- Specify the font size: the Size property 

A property can be used alone with the <font> command, or all three properties on a 
single line. 

Notes : 

The browser recognizes (7) different sizes of fonts, which are determined by the Size 
property, whose value ranges from 1 to 7 

After you use the closing </font> command, it ends up affecting the formatting of any 
text written after it. 

If the <font> command is not used, the font type appears on the web page by default. 
There are many commands through which the font is formatted, including: 

<u> command: Its function is to underline the text. 

<b> command: its function is to make the font bold. 

<i> command: Italicizes the font 


Complete: - The command.................... is used to make the font “Bold”. 


Date Lesson (12) strategy 

Class Add multimedia to a web Brainstorming 
|| Period page Dialogue and Discussion. 
| | By the end of the lesson the student will be able to: | "Preface" E 
| © Insert an image into a web page with the <img> . command | How can you add a picture asa | 


| | e Control the dimensions of the image on the web page through the | webpage background ? 
| properties. 
l e Align the image within the web page with the Align . property 


Accompanying activities 


Take the students to the computer room and divide them into groups and ask them the 


introductory question and ask them to write the basic commands for the page and show 


them how to insert an image of the web page and control its dimensions and align it and 


ask them to apply what they learned through the exercises in the book. 


View Lesson 


Insert an image into a web page: 

To insert an image into a web page, the src property of the <img> command is used. This 
requires specifying the name and location of the image file. 

Command syntax: <img src = “school.jpg”> 

Image dimensions control: Image dimensions are controlled through the properties of the 
<img> command as follows: 

- the height property (the height of the image), for example height="200" 

- property width (the width of the image), for example, width="300" 

The pixel is used to measure the dimensions of an image. 

Align the image on the web page: 

The alignment of the image is controlled through the Align property of the <img> 
command, and the property takes the following values: 

Right: Its function is to align the image to the far right. 

Left: Its function is to align the image to the far left. 

Middle: Its function is that the text is located along the middle of the image. 

Bottom: The text is located along the bottom edge of the image. 

Top: The text is located along the top edge of the image. 


Complete: - How can you insert an Image into a webpage? 


Date Lesson (13) strategy 

Class Add Multimedia / Brainstorming 
|| Period Hyperlink Dialogue and Discussion. 
| _ By the end of the lesson the student will be able to: "Preface" 


| | è Insert a sound as the background audio of the web page withthe How can you include a sound | | 
| bgsound command F 
| | e Insert a video into a web page with the embed . command 

| | e Insert a hyperlink to text or an image with the command (a) 


Accompanying activities 


Take the students to the computer room and divide them into groups and ask them the 
introductory question and ask them to write basic commands for the page and show 


| as the background of the 
_ web page? 


them how to include audio as the background of the page and use the necessary 
commands to insert a video and hyperlink to text or an image and ask them to apply what 
they learned through the book exercises. 


View Lesson 


Inserting the audio as the background audio for the page: The audio can be inserted as 
the background of the web page, where it is heard when the page is loaded in the 
browser using the <bgsound> command as follows: 

- Write the code as shown <bgsound src=” Egypt.mp3”> 

- Save the text file with the extension Htm. 

- Open the web page file in the Internet browser. 

Insert a video into a web page: 

Using the <embed> command, the video is inserted into the page and it supports video 
files of type (.swf - .avi - .mov ) 

Write the code as shown <embed src=” internet.avi’> 

Insert a hyperlink on a web page: A hyperlink is images or text associated with an address 
and when pressed, it goes to this address and it can be inside the page or on another 
page of the same site or another site. 

Text hyperlink: 

General format: <a href=http://www.moe.gov.eg> azhar.gov.eg </a> 

A hyperlink in the form of an image: To become a link image, the following must be done: 
- Show image using <img> . command 

- Put the <img> image command inside the <a> ...< /a> command to turn it into a 
hyperlink 

General syntax: <a href = “myschool.htm”><img src=”tools.jpg”> </a> 


Complete: - How to convert an image into a hyperlink? 


Date Lesson (14) strategy 

Class create Brainstorming 

| | Period my school website (1) Dialogue and Discussion. 
| By the end of the lesson the student will be able to: | 
| | e Determine the number of website pages from the 
|| detailed layout of the website 

| | e Create the home web page Home.htm 

| l e Create a web page about the school about.htm 


Accompanying activities 


Take the students to the computer room and divide them into groups and ask them the 


| "Preface" 7 
_ How can you create a website? 


introductory question and show the detailed outline of the site and ask them to 


determine the number of pages needed and make a practical presentation to create the 


pages (the main - about the school) and ask them to apply what they learned through the 
book’s exercises. 


View Lesson 


Creating my school website: From the detailed planning, it is clear that it consists of four 
pages, namely: 

1 - The main web page "My School" is stored in the file Home.htm 

2 - The web page “About the School” is stored in the about.htm . file 

3 - The web page "photo album" is saved in the file Photo.htm 

4 - The web page "Vision and Mission" is saved in the file vision.htm 

Create the "Home" web page Home.htm: The main web page consists of: 

- The text “My School” font (red color - type Tahoma - size 6) 

- Four text hyperlinks to other pages 

- picture 

- Code page (see book page 119) 

Create a web page about.htm about the school: The page consists of the following: 
- Texts: “School Establishment Date” - “School Address” - “School Telephone” 

- Font (red color - type Tahoma - size 6) 

- video 

- Image hyperlink (when pressed, it returns to the main page) 

- Page code (see book page 120) 


Complete: - Evaluate the students’ projects. 


Date Lesson (15) strategy 
Class create Brainstorming 
Period my school website (2) Dialogue and Discussion. 
| _ By the end of the lesson the student will be able to: 

| | e Create gallery page 

| | e Create vision and mission page 

: l e Insert hyperlinks between website pages 


Accompanying activities 


Take the students to the computer room and divide them into groups and ask them the 


"Preface" 
How can you insert J 
_ hyperlinks between pages? | | 


introductory question and show them the pages that have already been created and how 
to link them to the new pages after they have been created by linking. | show a practical 


demonstration of creating the pages (photo album - vision and message) and ask them to 


apply what they learned through the book’s exercises. 


View Lesson 


Create a web page "Photo.htm": 


The web page "About the School" consists of the following: 

- The text “photo album” font (red color - type Tahoma - size 6) 

- 3 photos 

- Image hyperlink (when pressed, it returns to the main pages) 

- Web page code "About the school" (see the book on page 121) 
Create a web page "Vision and Mission" Vision.htm: 

The web page consists of the following: 

- The text “Vision and Mission” font (red color - type Tahoma - size 6) 
- The text “The school’s vision...” font (type Tahoma - size 4) 

- Web page code "Vision and Mission" (See the book p. 122) 


Evaluation of students’ projects. 


